<template>
  <a-spin :spinning="spinning">
    <div class="md:flex systemstate-warpper">
      <div class="title"
        ><span>系统状态</span>
        <span class="flex">
          <div @click.stop="getinserttest" class="right12 pointer" :loading="loading">性能测试</div>
          <div @click.stop="gethardwareinfo" class="pointer">刷新</div>
        </span>
      </div>
      <div class="ringChart">
        <div class="ringChart-item">
          <a-progress
            :showInfo="false"
            type="circle"
            :percent="cpu_percent"
            :strokeWidth="strokeWidth"
            strokeColor="#2C68FF"
            trailColor="#EBEEF5"
            :width="64"
          />
          <div class="ring-data">
            <div class="ring-rate">{{ cpu_percent }}<span>%</span></div>
            <div class="ring-name">CPU占用率</div>
          </div>
        </div>

        <div class="ringChart-item">
          <a-progress
            :showInfo="false"
            type="circle"
            :percent="memory_percent"
            :strokeWidth="strokeWidth"
            strokeColor="#52CCA3"
            :width="64"
          />
          <div class="ring-data">
            <div class="ring-rate">{{ memory_percent }}<span>%</span></div>
            <div class="ring-name">内存占用率</div>
          </div>
        </div>

        <div class="ringChart-item">
          <a-progress
            :showInfo="false"
            type="circle"
            :percent="hard_disk_percent"
            :strokeWidth="strokeWidth"
            strokeColor="#FFB540"
            :width="64"
          />
          <div class="ring-data">
            <div class="ring-rate">{{ hard_disk_percent }}<span>%</span></div>
            <div class="ring-name">硬盘利用率</div>
          </div>
        </div>
      </div>
      <div class="systemstate-row marginTop8">
        <div class="systemstate-row-left">当前时间</div>
        <div class="systemstate-row-right">{{ sys_now_time }}</div>
      </div>

      <div class="systemstate-row">
        <div class="systemstate-row-left">系统启动时间</div>
        <div class="systemstate-row-right">{{ timediff }}</div>
      </div>

      <div class="systemstate-row">
        <div class="systemstate-row-left">IP地址</div>
        <div class="systemstate-row-right">{{ ip_address }}</div>
      </div>

      <div class="systemstate-row">
        <div class="systemstate-row-left">性能测试</div>
        <div class="systemstate-row-right" style="line-height: 22px"
          >{{ insert_time }}秒 <br />
          {{ update_time }}</div
        >
      </div>
    </div>
  </a-spin>
</template>

<script lang="ts">
  import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue';
  import { hardwareinfo, inserttest } from '/@/api/sys/gateway/gateway';
  import moment from 'moment';
  export default defineComponent({
    setup() {
      const spinning = ref<boolean>(false);
      const loading = ref<boolean>(false);
      const state = reactive({
        cpu_percent: 0,
        memory_percent: 0,
        hard_disk_percent: 0,
        sys_now_time: '',
        ip_address: '',
        gateway_restart_time: '',
        update_time: '',
        insert_time: '/',
        timediff: '/',
        strokeWidth: 18,
      });
      //获取硬件信息
      const gethardwareinfo = () => {
        spinning.value = true;
        hardwareinfo().then((e) => {
          spinning.value = false;
          state.cpu_percent = e.cpu_percent;
          state.memory_percent = e.memory_percent;
          state.hard_disk_percent = e.hard_disk_percent;
          state.sys_now_time = e.sys_now_time;
          state.ip_address = e.ip_address;
          state.gateway_restart_time = e.gateway_restart_time;
          state.insert_time = e.insert_time;
          state.update_time = e.update_time;
          timeDifference(e.sys_now_time, e.gateway_restart_time);
        });
      };
      //计算时间差
      const timeDifference = (sys_now_time, gateway_restart_time) => {
        let t1: any = moment(sys_now_time);
        let t2: any = moment(gateway_restart_time);
        // 计算时间差并转换成标准时间单位
        let dura: any = t1.format('x') - t2.format('x');
        let tempTime = moment.duration(dura);
        tempTime.days(); //是（实际天数%30），例如相差36天，计算成6。以下类推
        tempTime.hours();
        tempTime.minutes();
        tempTime.seconds();
        let time =
          tempTime.days() +
          '天' +
          tempTime.hours() +
          '时' +
          tempTime.minutes() +
          '分' +
          tempTime.seconds() +
          '秒';
        state.timediff = time;
        console.log(tempTime.days(), tempTime.hours(), tempTime.minutes(), tempTime.seconds());
      };
      //性能测试
      const getinserttest = () => {
        loading.value = true;
        inserttest().then((e) => {
          loading.value = false;
          state.insert_time = e.insert_time;
          state.update_time = e.update_time;
        });
      };
      onMounted(() => {
        gethardwareinfo();
      });
      return {
        ...toRefs(state),
        spinning,
        loading,
        gethardwareinfo,
        getinserttest,
      };
    },
  });
</script>

<style lang="less" scoped>
  .systemstate-warpper {
    background-color: #fff;
    padding: 20px 24px 27px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .pointer {
      cursor: pointer;
    }
    .title {
      display: flex;
      justify-content: space-between;
      font-weight: 500;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.8);
      position: relative;
      padding-left: 12px;
      box-sizing: border-box;
      margin-bottom: 16px;
      align-items: center;
      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 16px;
        background: #2367fa;
        border-radius: 2px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        margin: auto;
        left: 0px;
      }
      .right12 {
        margin-right: 25px;
        position: relative;
        &::after {
          content: '';
          display: inline-block;
          width: 1px;
          height: 15px;
          background: #e6e6e6;
          border-radius: 2px;
          position: absolute;
          top: 0px;
          bottom: 0px;
          margin: auto;
          right: -12px;
        }
      }
      .flex {
        color: #2c68ff;
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFangSC-Regular;
        font-size: 14px;
      }
    }
    .ringChart {
      display: flex;
      flex-direction: column;
      .ringChart-item {
        display: flex;
        align-items: center;
        padding: 17px 18px;
        box-sizing: border-box;
        margin-bottom: 16px;
        background: #f6f8ff;
        border-radius: 8px;
        height: 104px;
        .ring-data {
          margin-left: 16px;
          .ring-rate {
            font-size: 28px;
            font-weight: 500;
            span {
              font-size: 14px;
              font-weight: 400;
              margin-left: 2px;
            }
          }
          .ring-name {
            color: #3a3837;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
          }
        }
      }
    }
    .marginTop8 {
      margin-top: 8px;
    }
    .systemstate-row {
      display: flex;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      line-height: 32px;
      align-items: baseline;
      .systemstate-row-left {
        opacity: 0.65;
        color: #3a3837;
        width: 90px;
        text-align: right;
      }
      .systemstate-row-right {
        color: 3a3837;
        margin-left: 16px;
      }
    }
  }
</style>
